<template>
	<div class="equation-top-item-content">
		<div class="equation-top-item-bg" style="opacity: 1; width: 232px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="sinh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="tanh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="sech()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cosh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="coth()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="csch()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_0_6.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 310.656px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="sinh^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="tanh^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="sech^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="cosh^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="coth^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="csch^-1()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_1_6.png"></div>
		</div>
		<div class="equation-top-item-bg" style="opacity: 1; width: 292px;">
			<div class="equation-top-dom-item" @click="selectItem" data-code="arcsinh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_1.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arctanh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_2.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arcsech()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_3.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccosh()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_4.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccoth()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_5.png"></div>
			<div class="equation-top-dom-item" @click="selectItem" data-code="arccsch()" data-type="hyperbolicTrigonometric" data-poupe=""
				 data-key="" style="height: 40px;"><img class="equation-top-dom-item-image"
														src="../../../assets/images/latex/ht_2_6.png"></div>
		</div>
	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	append: {
		type: Function,
		default: () => {}  // 默认空函数，避免报错
	}
});
const emit = defineEmits(['fomule']);
const selectItem = (event: MouseEvent) => {
	// 获取触发事件的元素
	const target = event.currentTarget as HTMLElement;
	// 读取 data-code 属性值
	const code = target.dataset.code;
	props.append(code);
	emit('fomule', code);
};
</script>

<style scoped lang="scss">

</style>
